import {
    Button,
    Form,
    Input,
    message,
    Upload
} from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import { useState } from 'react';
import { useNavigate} from "react-router-dom"

import {addMsg} from '../../../../../../utils/hsyHttp/hsyhttp.jsx'
// import {
//     useLocation,
//     useNavigate
//   } from 'react-router-dom';

const getBase64 = (img, callback) => {
    const reader = new FileReader();
    reader.addEventListener('load', () => callback(reader.result));
    reader.readAsDataURL(img);
  };

const UnitTypeInformation = () => {
    const navigate = useNavigate()
    const [loading, setLoading] = useState(false);
    const [imageUrl, setImageUrl] = useState();
    const handleChange = (info) => {//判断他的类型和大小
        const isJpgOrPng = info.file.type === 'image/jpeg' || info.file.type === 'image/png' || info.file.type === 'image/jpg';
        if (!isJpgOrPng) {
            return message.error('只能上传格式为jpeg/jpg/png的图片');
        }
        const isLt2M = info.file.size / 1024 / 1024 < 2;
        if (!isLt2M) {
            return message.error('最大只能上传2M的图片');
        }
        //将文件对象转成base64的地址，img才能显示出来
        getBase64(info.file.originFileObj, (url) => {
            console.log(url);
            setImageUrl(url);
        });

    };
    const uploadButton = (
        <div>
            {loading ? <LoadingOutlined /> : <PlusOutlined />}
            <div
                style={{
                    marginTop: 8,
                }}
            >
                添加
            </div>
        </div>
    );
    const customRequest = () => {
        console.log('customRequest 执行了')
    }
    // const c_id = useLocation().state.c_id
    //添加
    const Add = (values) => {
        console.log('提交内容', values);
        //第一步，得到一个formData盒子
        let myFormData = new FormData()
        //第二步，讲文件装到这个盒子里面去  组装数据
        // myFormData.append(内容的名字，内容)  如果这个内容是一个文件，放的就是文件对象
        // myFormData.append('myfile1',values.consult_img.file.originFileObj)
        // myFormData.append('s_name',values.consult_title)
        myFormData.append('u_img', values.u_img.file.originFileObj)
        myFormData.append('u_name', values.u_name)
        myFormData.append('u_a', values.u_a)
        myFormData.append('u_b', values.u_b)
        myFormData.append('u_c', values.u_c)
        myFormData.append('u_d', values.u_d)
        myFormData.append('c_to', values.c_to)
        myFormData.append('u_are', values.u_are)
        myFormData.append('u_high', values.u_high)
        myFormData.append('u_type', values.u_type)
        myFormData.append('c_id',values.c_id)

    
        addMsg(myFormData).then(res => {
            navigate('/home/NewFloor')
          message.success('添加成功')
        })
      }
    
    return (
        <Form
            onFinish={Add}
            labelCol={{
                span: 4,
            }}
            wrapperCol={{
                span: 14,
            }}
            layout="horizontal"
            style={{
                maxWidth: 600,
            }}
        >
            <Form.Item label="添加头像" name="u_img" >
                <Upload
                    name="avatar"
                    listType="picture-card"
                    className="avatar-uploader"
                    showUploadList={false}
                    action=""
                    onChange={handleChange}
                    customRequest={customRequest}
                >
                    {imageUrl ? (
                        <img
                            src={imageUrl}
                            alt="avatar"
                            style={{
                                width: '100%',
                            }}
                        />
                    ) : (
                        uploadButton
                    )}
                </Upload>
            </Form.Item>

            <Form.Item label="户型名称" name="u_name" >
                <Input />
            </Form.Item>

            <Form.Item label="室" name="u_a">
                <Input />
            </Form.Item>

            <Form.Item label="厅" name="u_b">
                <Input />
            </Form.Item>

            <Form.Item label="卫" name="u_c">
                <Input />
            </Form.Item>

            <Form.Item label="厨" name="u_d">
                <Input />
            </Form.Item>

            <Form.Item label="朝向" name="u_to">
                <Input />
            </Form.Item>

            <Form.Item label="面积" name="u_are">
                <Input />
            </Form.Item>

            <Form.Item label="层高" name="u_high">
                <Input />
            </Form.Item>

            <Form.Item label="类型" name="u_type">
                <Input />
            </Form.Item>

            <Form.Item label="编号" name="c_id">
                <Input />
            </Form.Item>

            <Form.Item>
                <Button type="primary" htmlType="submit">
                    保存
                </Button>
            </Form.Item>

        </Form>
    )
}

export default UnitTypeInformation